<template>
  <div class="X_Video">
    <!-- 分类区 -->
    <div class="choose">
      <el-menu default-active="1">
        <el-menu-item index="1" @click="changeShow('全部')">全部</el-menu-item>
        <el-menu-item index="2" @click="changeShow('四大件')">四大件</el-menu-item>
        <el-menu-item index="3" @click="changeShow('黑马')">黑马</el-menu-item>
        <el-menu-item index="4" @click="changeShow('音乐MV')">音乐MV</el-menu-item>
        <el-menu-item index="5" @click="changeShow('下饭')">下饭</el-menu-item>
        <el-menu-item index="6" @click="changeShow('网络电视')">网络电视</el-menu-item>
      </el-menu>
    </div>

    <!-- 核心内容 -->
    <div class="waterful">

      <div class="water_item" @click="open_WatchVideo(item.video_id)" v-for="item in show_videos" :key="item.video_id">
        <!-- 封面 -->
        <div class="fengmian">
          <img :src="item.cover_img">
        </div>

        <!-- 信息 -->
        <div class="water_item_imfo">
          <!-- 头像 -->
          <div class="auther_img">
            <img :src="item.auther_avatar" alt="">
          </div>
          <!-- 标题，作者名，播放数 -->
          <div class="auther_text">
            <div class="auther_title">{{ item.title }}</div>
            <div class="auther_name">来自：{{item.auther_name}}</div>
            <div class="auther_name">{{item.starts_number}}次收藏·2天前</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'X_Video',
  data() {
    return {
      show_videos: [
        {
          "video_id": 1,
          "auther_id": 1,
          "auther_name": "admin",
          "auther_avatar": "http://localhost:3000/data/_r.jpg",
          "title": "测试视频",
          "cover_img": "http://localhost:3000/data/fengmian.webp",
          "file_address_collection": "http://localhost:3000/data/1687867875893-测试视频.mp4",
          "create_time": "2023-06-27T04:29:17.000Z",
          "tag": "前端",
          "likes_number": 666,
          "starts_number": 888,
          "share_number": 999
        }
      ],

      all_videos: [
        {
          "video_id": 1,
          "auther_id": 1,
          "auther_name": "admin",
          "auther_avatar": "http://localhost:3000/data/_r.jpg",
          "title": "测试视频",
          "cover_img": "http://localhost:3000/data/fengmian.webp",
          "file_address_collection": "http://localhost:3000/data/1687867875893-测试视频.mp4",
          "create_time": "2023-06-27T04:29:17.000Z",
          "tag": "前端",
          "likes_number": 666,
          "starts_number": 888,
          "share_number": 999
        },
        {
          "video_id": 2,
          "auther_id": 1,
          "auther_name": "admin",
          "auther_avatar": "http://localhost:3000/data/_r.jpg",
          "title": "测试视频",
          "cover_img": "http://localhost:3000/data/fengmian.webp",
          "file_address_collection": "http://localhost:3000/data/1687867875893-测试视频.mp4",
          "create_time": "2023-06-27T04:29:38.000Z",
          "tag": "前端",
          "likes_number": 666,
          "starts_number": 888,
          "share_number": 999
        },
        {
          "video_id": 3,
          "auther_id": 1,
          "auther_name": "admin",
          "auther_avatar": "http://localhost:3000/data/_r.jpg",
          "title": "测试视频",
          "cover_img": "http://localhost:3000/data/fengmian.webp",
          "file_address_collection": "http://localhost:3000/data/1687867875893-测试视频.mp4",
          "create_time": "2023-06-27T04:30:45.000Z",
          "tag": "前端",
          "likes_number": 666,
          "starts_number": 888,
          "share_number": 999
        }
      ]
    }
  },
  mounted() {
    this.load_videosData()
  },
  methods: {
    open_WatchVideo(videoId) {
      this.$router.push({ path: "/xflow/WatchVideo", query: { video_id: videoId } })
    },

    // 加载所有视频数据 http://localhost:3000/video/getAllVideos
    load_videosData() {
      this.$http({
        url: '/video/getAllVideos',
        method: 'post'
      }).then(res => {
        // 存储所有笔记
        this.all_videos = res.data.data
        // 因为默认时查看所有，故初始化时也将show_notes设置为所有笔记
        this.show_videos = res.data.data
      }).catch(res => {
        console.log(res);
      })
    },

    // 切换 瀑布流内容展示
    changeShow(type_str) {

      // 全部 四大件 黑马 音乐MV 下饭 网络电视
      if ("全部" == type_str) {
        this.show_videos = this.all_videos
      }
      else {
        var new_show_data = [];
        for (var i = 0; i < this.all_videos.length; i++) {
          var item = this.all_videos[i];
          if (item.tag == type_str) {
            new_show_data.push(item)
          }
        }
        this.show_videos = new_show_data;
      }
    },
  }
}
</script>

<style lang="less" scoped>
.X_Video {
  width: 100%;
  height: auto;
  min-height: 760px;
  overflow: scroll;

  position: relative;

  .choose {
    position: fixed;
    background-color: rgb(248, 247, 246);
    width: 6%;
    height: 290px;
    margin-left: 5px;
    margin-right: 4px;

    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;
    overflow: hidden;

    .el-menu {
      background-color: rgba(0, 0, 0, 0);
    }

    .el-menu-item {
      background-color: rgba(0, 0, 0, 0);
      // 侧边栏字体
      font-size: 16px;
      font-weight: 400;
    }
  }
}

// 专注内容区，就不嵌套进choose的less样式了
// 瀑布流布局
.waterful {
  position: absolute;
  right: 5px;
  top: 0;
  width: 93%;
  height: auto;
  min-height: 760px;

  box-sizing: border-box;
  padding: 20px;

  column-count: 4; //想要排成的列数
  column-gap: 0; // 列间距
  margin-bottom: 150px;

  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(50px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
  transition: all 0.3s ease 0s;

  border-radius: 10px;

  // overflow: scroll;
}

/* 去除滚动栏，保留滚动效果*/
.waterful::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

// 瀑布流内部子元素
.water_item {
  break-inside: avoid; //避免“瀑布流”内部的内容被断开
  width: 325px;
  height: auto;
  margin-bottom: 13px;

  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(50px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
  transition: all 0.3s ease 0s;

  border-radius: 10px;

  // 封面
  .fengmian {
    img {
      width: 325px;
      height: auto;
      border-radius: 10px;
    }
  }

  // 内容信息
  .water_item_imfo {
    width: 325px;
    height: auto;
    display: flex;

    .auther_img {
      width: 20%;

      // background-color: aquamarine;
      img {
        height: 50px;
        width: 50px;
        border: 1px solid #fff;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
      }
    }

    .auther_text {
      width: 80%;
      // background-color: bisque;

      .auther_name {
        color: #606060;
        font-size: 14px;
      }
    }

  }
}

.water_item:hover {
  cursor: pointer;

  // transform: scale(1.0005);
  transition-duration: 0.05s;
  transition-timing-function: linear;
  transition-delay: 0s;
  transition-property: all;

  .fengmian {
    filter: contrast(1.15);
  }
}
</style>